<script lang="ts" setup>
import { NuxtLink } from '#components';

const router = useRouter()
const navList = ref()

const routerList = router.getRoutes().map(item => ({ to: item.path, name: item.meta.title ?? item.name })).reverse()
navList.value = routerList
</script>

<template>
  <div>
    <div mx-auto w-1200px flex p-4 space-x-4>
      <NuxtLink  v-for="nav in navList" :key="nav.name" :to="nav.to" active-class="text-blue-500" exact hover-text-blue-500>
        {{ nav.name   }}  {{ nav.to }}
      </NuxtLink>
    </div>
    <slot /> 
    <!--   slot定义子组件的插入点, 在nuxt中, 默认 路由根目录为 pages/index.vue  -->
   </div>
</template>

<style scoped>

</style>
